<template>
    <!-- 查询栏 -->
    <!-- <div class="query">
        <QueryForm :form="form" v-model="queryData" @handleQuery="handleQuery" />
    </div> -->
    <!-- 表单栏 -->
    <div class="table">
        <BaseTable v-if="refreshTable" v-loading="tableLoading" :columns="columns" :data="dataList" @handleAction="handleAction"
            row-key="id" :tree-props="{ children: 'children', label: 'name' }" :default-expand-all="expandAll">
            <template v-slot:action>
                <el-button type="primary" @click="handleCreate">新增一级分类</el-button>
                <el-button type="success" @click="handleExpandAll">{{expandAllTxt}}</el-button>
            </template>
        </BaseTable>
        <!-- 弹窗 -->
        <el-dialog :title="action == 'add' ? '新增' : '编辑'" v-model="showModal" :before-close="handleClose">
            <el-form ref="dialogForm" :rules="rules" :model="dataForm" label-width="100px">
                <el-form-item label="分类名字" prop="name">
                    <el-input v-model="dataForm.name" placeholder="请输入分类名字" />
                </el-form-item>
                <el-form-item label="父级ID" prop="pid">
                    <el-input disabled v-model="dataForm.pid" placeholder="请输入父级ID" />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="dataForm.status">
                        <el-option :value="1" label="启用"></el-option>
                        <el-option :value="0" label="禁用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model="dataForm.sort" placeholder="请输入排序" />
                </el-form-item>
                <el-form-item label="图标" prop="icon">
                    <el-input v-model="dataForm.icon" placeholder="请输入图标" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, reactive, ref, toRaw } from "vue";
import {
    blogCategoryAdd,
    blogCategoryEdit,
    blogCategoryDel,
    queryBlogCategoryList,
} from "@/api/blogCategory";
import { ElMessage } from "element-plus";
/****************************************** data ******************************************/

// 展开所有
const expandAll = ref(false)
const refreshTable = ref(true)
const expandAllTxt = ref("展开所有分类")


// 渲染数据
const dataList = ref(<any>[]);

// 编辑动作：add,edit,delete
const action = ref("");

// 弹窗变量
const showModal = ref(false);

// 表格提交数据
const dataForm = ref(<any>{ status: 0, carousel_img: "" });

// 弹窗ref
const dialogForm = ref(<any>null);

// 所有分类数据
const categoryList = ref(<any>[]);

// 表单loading
const tableLoading = ref(false);

// 初始化用户表单对象
const queryData = ref(<any>{ status: null });

// 生成查询form结构数据
const form = [
    {
        type: "input",
        label: "分类名字",
        model: "name",
        placeholder: "请输入分类名字",
    },
    {
        type: "select",
        label: "状态",
        model: "status",
        placeholder: "请选择状态",
        options: [
            { label: "禁用", value: 0 },
            { label: "启用", value: 1 },
        ],
    },
];

// 定义动态表格的格式
const columns = reactive([
    {
        label: "分类名字",
        prop: "name",
    },
    {
        label: "统计",
        prop: "cnt",
    },
    {
        type: "tag",
        label: "状态",
        prop: "status",
        formatter: (row: any, column: any, value: number) => {
            return {
                0: "禁用",
                1: "启用",
            }[value];
        },
        dict: {
            0: "danger",
            1: "success",
        },
    },
    {
        label: "排序",
        prop: "sort",
    },
    {
        label: "创建时间",
        prop: "created_time",
    },
    {
        label: "更新时间",
        prop: "updated_time",
    },
    {
        label: "图标",
        prop: "icon",
    },
    {
        type: "action",
        label: "操作",
        width: 200,
        list: [{ text: "添加子分类", type: "text", cond: { prop: "pid", value: [0] }}, { text: "编辑", type: "text" }, { text: "删除",confirm: true }],
    },
]);

// 弹窗校验规则
const rules = reactive({
    name: [
        {
            required: true,
            message: "请输入分类名字",
            trigger: "blur",
        },
    ],
    status: [
        {
            required: true,
            message: "请输入状态#0-禁用;1-启用",
            trigger: "blur",
        },
    ],
});
/****************************************** 生命周期函数 ******************************************/
onMounted(async () => {
    await handleQuery();
});

/****************************************** method ******************************************/

// 展开所有分类
const handleExpandAll = async () =>{
    refreshTable.value = false
    await nextTick()
    expandAll.value = !expandAll.value
    if(expandAll.value){
        expandAllTxt.value = "关闭所有分类"
    }else{
         expandAllTxt.value = "展开所有分类"
    }
    refreshTable.value = true
}

// 查询
const handleQuery = async () => {
    tableLoading.value = true;
    let data = (await queryBlogCategoryList({})).data;
    dataList.value = data;
    tableLoading.value = false;
};

// 新增
const handleCreate = () => {
    action.value = "add";
    showModal.value = true;
};

// 操作
const handleAction = async ({ text, row }: any) => {
    if (text === "编辑") {
        action.value = "edit";
        showModal.value = true;
        await nextTick();
        Object.assign(dataForm.value, row);
    } else if (text === "添加子分类") {
        action.value === "add"
        showModal.value = true;
        dataForm.value.pid = row.id
    }else if (text === "删除") {
        await blogCategoryDel({ id: row.id });
        ElMessage({ message: "删除成功", type: "success" });
        handleQuery();
    }
};

// 取消
const handleClose = () => {
    showModal.value = false;
    handleReset(dialogForm);
};

// 重置
const handleReset = (form: any) => {
    form.value.resetFields();
};

// 提交
const handleSubmit = () => {
    let res: any;
    dialogForm.value.validate(async (valid: boolean) => {
        if (valid) {
            let params = toRaw(dataForm.value);
            if (action.value === "add") {
                res = await blogCategoryAdd(params);
            } else if (action.value === "edit") {
                res = await blogCategoryEdit(params);
            }
            if (res && res.code === 200) {
                showModal.value = false;
                ElMessage({ message: "操作成功", type: "success" });
                handleReset(dialogForm);
                handleQuery();
            }
        }
    });
};
</script>

<style lang="scss" scoped>
</style>
